<template>
	<section class="scholl border-box">
		<div>
			<div class="border-b20">
				<scroll-navbar :channels="channels" key-name="name" key-id="strId" v-model="strId" ></scroll-navbar>
			</div>
			<ul class="bg-white order-list pb30rem"
				v-infinite-scroll="loadData" 
				infinite-scroll-disabled="loading" 
				infinite-scroll-distance="10"
				v-if="flag"
			>
				<li class="border-b20 order-list-item" v-for="(item, index) in order_list">
					<router-link :to="'order/detail?order_id='+item.order_id">					
						<div class="order-head pl30rem pr30rem pt20rem pb20rem layout fs30rem">
							<div class="layout">
								<img :src="img_url+item.shop_icon" class="store-img mr30rem">
								<span class="fs30rem">
									{{item.shop_name}}
								</span>
							</div>
							<span :class="{green: item.order_status == 4 || item.order_status == 1 || item.order_status == 11 || item.order_status == 13, 
										   	red: item.order_status == 0,
										  orange: item.order_status == 2}"
							>
								{{order_status_arr[item.order_status]}}				
							</span>
						</div>
						<ul>
							<li class="body-item" v-for="n in item.content">
								<div class="body layout-juscon pl30rem pr30rem pt20rem pb20rem">
									<img :src="img_url+n.goods_picture">
									<div class="goods-text flex_1 ml20rem mr20rem">
										<p class="bold black fs28rem">
											{{n.goods_name}}
										</p>
										<p class='mt10rem'>
											<small class="c999 fs20rem" v-for="m in n.spec_name">  
												{{ m }}
											</small>
										</p>
									</div>
									<div class="align-right fs24rem layout-juscon flex-column">
										<div class="goods-price fs28rem">
											￥{{n.goods_money}}
										</div>
										<p class="flex-end">
											<i class="iconfont icon-price mr20rem"></i>
											{{ n.order_type }}
										</p>
									</div>
								</div>								
							</li>
						</ul>
					</router-link>
					<div class="foot pt20rem pb20rem pr30rem pl30rem align-right">
						<div class="fs22rem pb20rem">
							共 {{item.total_num}} 件商品 &emsp;
							合计：
							<span class="red fs26rem">
							￥{{item.order_money}}</span>
							&emsp;
							(&nbsp;含运费 &nbsp; ￥0.00&nbsp;)
						</div>
						<!-- 待付款 -->
						<div v-if="item.order_status == 0">
							<button 								
								@click="canceledOrder(item.order_id, index)" 
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem delete-btn"
								v-if="item.state == '-100'"
							>
								取消订单
							</button>
							<button 
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem assess-btn"
								@click="pay(item)"
								v-if="item.state_1 == '101'"
							>
								立即付款
							</button>
						</div>	
						<!-- 待发货 -->
						<div v-if="item.order_status == 1">
							<router-link tag="button" :to="'/member/order/refund?order_id='+ item.order_id+'&goods_picture='+item.content[0].goods_picture"
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem delete-btn mr10rem"
								v-if="item.state_2 == '300'"
							>
								退款/退货
							</router-link>
							<button 								
								@click="canceledOrder(item.order_id, index)" 
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem delete-btn"
								v-if="item.state == '-100'"
							>
								取消订单
							</button>
							<button 
								@click="tips(item.order_id, item.shop_id)"
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem assess-btn"
								v-if="item.state_1 == '100'"
							>
								提醒发货
							</button>
						</div>
						<!-- 待收货 -->
						<div v-if="item.order_status == 2">
							<router-link tag="button" :to="'/member/order/refund?order_id='+ item.order_id+'&goods_picture='+item.content[0].goods_picture"
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem delete-btn mr10rem"
								v-if="item.state_2 == '300'"
							>
								退款/退货
							</router-link>
							<router-link 
								:to="'order/Express?order_id='+item.order_id"
								class="pt10rem pr10rem pb10rem pl10rem mr5 button fs24rem delete-btn"
								v-if="item.state == '200'"
							>
								查看物流
							</router-link>							
							<button 
								@click="recieveOrderFun(item.order_id)"
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem assess-btn"
								v-if="item.state_1 == '201'"
							>
								确认收货		
							</button>							
						</div>				
						<!-- 交易完成 -->
						<div v-if="item.order_status == 4 || item.order_status == 3">
							<router-link 
								:to="'order/Express?order_id='+item.order_id"
								class="pt10rem pr10rem pb10rem pl10rem mr5 button fs24rem delete-btn"
								v-if="item.state == '200'"
							>
								查看物流
							</router-link>	
							<router-link tag="button" to="/member/order/Evaluate"	
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem assess-btn"
								v-if="item.state_1 == '302'"
							>
								追加评价
							</router-link>		
							<router-link
								tag="button" :to="'/member/order/EvaluateEdit?order_id='+ item.order_id"	
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem assess-btn"
								v-if="item.state_1 == '301'"
							>
								评价晒单
							</router-link>						
						</div>	
						<div v-if="item.order_status == 5">	
							<button 
								@click="deleteOrder(item.order_id, index)" 
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem delete-btn"
								v-if="item.state == '-400'"
							>
								删除订单
							</button>
						</div>
						<div v-if="item.order_status == 11">	
							<button 
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem delete-btn"
								v-if="item.state_1 == '300'"
							>
								退款/退货
							</button>
							<button 
								@click="deleteOrder(item.order_id, index)" 
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem delete-btn"
								v-if="item.state == '-400'"
							>
								删除订单
							</button>
						</div>
						<div v-if="item.order_status == 8">
							<button 
								@click="canceledOrder(item.order_id, index)" 
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem delete-btn"
								v-if="item.state == '-100'"
							>
								取消订单
							</button>
						</div>
						<!-- 待分享 -->
						<div v-if="item.order_status == 13">	
							<button 
								@click="shareOrder(item)" 
								class="pt10rem pr15rem pb10rem pl10rem button fs24rem assess-btn">
								去分享
							</button>
						</div>
					</div>
				</li>
			</ul>	
			<template v-else>
				<default :imgUrl="img" explain='暂无信息'></default>
			</template>									
		</div>
			<!-- 支付方式 -->
		<popup v-model="payment" position="bottom" class="w100">
			<div class="coupon">
				<h2 class="fs34rem c333 bold align-center">支付方式<i class="iconfont icon-guanbi" @click="payment = false"></i></h2>
				<ul>
					<li class="pl30rem pr30rem pt30rem pb30rem border-t" @click="alipay">
						<label for="alipay" class="layout w100 h100">
							<div class="layout">
								<i class="iconfont icon-zhifubao" style="color:#1296db"></i>
								<p class="fs30rem ml20rem">支付宝</p>
							</div>
							<div class="pretty p-icon p-round p-jelly mr20rem fs18">
								<input type="radio" name="radio" id="alipay">
								<div class="state p-primary">
									<i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
									<label></label>
								</div>
							</div>
						</label>
					</li>
					<li class="pl30rem pr30rem pt30rem pb30rem border-t" @click="wechat">
						<label for="wechat" class="layout w100 h100">
							<div class="layout">
								<i class="iconfont icon-weixin3" style="color:#00b90c"></i>
								<p class="fs30rem ml20rem">微信</p>
							</div>
							<div class="pretty p-icon p-round p-jelly mr20rem fs18">
								<input type="radio" name="radio" id="wechat">
								<div class="state p-primary">
									<i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
									<label></label>
								</div>
							</div>
						</label>
					</li>
				</ul>
			</div>
		</popup>		
	</section>
</template>

<script>
	import { myOrder, delOrder, cancelOrder,remindShipping, recieveOrder }  from '@/api/ordering';
	import { payOrder } from "@/api/shopping-cart";
	import ScrollNavbar from '@/components/Scroll-navbar';
	import Default from "@/components/Default";
	import $modal  		from '@/utils/modal';		
	import $toast 		from '@/utils/toast';
	import { InfiniteScroll,Popup,MessageBox  } from 'mint-ui';	
	import { iosapp } from "@/utils";
	export default
	{
		components: 
		{
			ScrollNavbar,
			Default,
			Popup,
			MessageBox 
		},
		directives:{
			InfiniteScroll
		},
		data() 
		{
			return{
				strId        : this.$route.query.status,
				showApp      : window.sessionStorage.getItem('isapp'),
				uid          : localStorage.getItem('uid'),
				order_list   : [],
				page         : 1,
				order_id     : null,
				img_url      : process.env.IMG_URL,
				img          : require('../../../assets/icon-goods2.png'),
				flag         : true,
				loading      : false,
				sign         : false,
				payment      : false,
				payment_type : '',
				order_id     : '',
				order_cate   : '',
				identify_id  : 0,
				channels: [ 
					{ id: 3, strId: 'all'		 , name: '全部'},
					{ id: 0, strId: 'waitPay'    , name: '待付款'},
					{ id: 1, strId: 'waitShip'	 , name: '待发货'},
					{ id: 2, strId: 'waitReceipt', name: '待收货'},
					{ id: 4, strId: 'waitShare', name: '待分享'},
				],
				
				order_status_arr: ['待支付', '待发货', '已发货','已收货','交易完成', '交易关闭', '预约成功','预约中', '预约失败', '预购中', '预售成功','预售失败','','待分享']
			}
		},
		watch:{
			strId(val){
				this.loadInitData();
			}
		},
		methods:
		{
			loadData()
			{
				// 防止多次加载
				this.loading = true;
				var params = {
					uid			: this.uid,
					order_status: this.strId,
					page		: this.page++,
					item 		: 10
				};
				myOrder(params).then( res => {
					if(res.data.length > 0 )
					{
						this.order_list = this.order_list.concat(res.data);
						this.loading = false;
					}
					else if (params.page > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.item)
					{
						this.loading = true;
					}
				});
			},
			loadInitData()
			{
				this.page = 1;
				this.flag = true;
				this.order_list = [];
				this.loadData();
			},
			deleteOrder(id,index)
			{
				$modal.confirm("确定删除订单吗？","提示").then(res=>{
					delOrder(this.uid, id).then(res => {
						$toast("删除成功");
						this.order_list.splice(index, 1);
					})
				});	
			},
			canceledOrder(id,index)
			{
				$modal.confirm("确定取消订单吗？","提示").then(res=>{
					let params = {
						uid : this.uid,
						order_id  : id,
						sign    : 0
					}
					cancelOrder(params).then(res => {
						$toast("取消订单成功");
						this.order_list.splice(index, 1);
					})
				});					
			},

			shareOrder(item)
			{
				this.$router.push("/detail/group-booking");
			},
			tips(order, shop)
			{
				$modal.confirm("确定提醒发货吗？","提示").then(res=>{
					remindShipping(this.uid, order, shop).then( res => {
						$toast("提醒发货成功");
					});
				});				
			},
			recieveOrderFun(order)
			{
				MessageBox.prompt('请输入密码').then(({ value, action }) => {
				  	recieveOrder(this.uid, order,value).then( res => {
						this.loadInitData();
					});
				});
			},
			pay(item)
			{
				if( !this.order_id ){
					this.order_id = item.order_id;
					this.order_cate = item.order_cate
				}
				if (window.__wxjs_environment === 'miniprogram')
					this.identify_id = '1'
				let params = {
					uid        : this.uid,
					order_id   : this.order_id,
					order_type : this.order_cate,
					pay_mode   : '0',
					type       : this.showApp == '1' ? this.payment_type : '0',
					identify_id : this.identify_id,
				}
				if(this.showApp && !this.payment_type)
				{
					this.payment = true;
					
					this.sign = true;
				}
				else if(this.showApp && this.payment_type)
				{
					iosapp('memberPay',params)
				}
				else{
					payOrder(params).then(res => {
						console.log(44)
						if (window.__wxjs_environment === 'miniprogram'){
							console.log(res)
							let param = '?timestamp='+ res.data.timestamp + '&nonceStr=' + res.data.noncestr
			                   +'&package='+ res.data.package +'&signType=MD5&paySign='+ res.data.sign +'&order_id='+ this.order_id +'&pType=0';
			                  //定义path 与小程序的支付页面的路径相对应
			                var path = '/pages/wxpay/wxpay' + param;

			                  //通过JSSDK的api使小程序跳转到指定的小程序页面
			                wx.miniProgram.navigateTo({url: path});

						}
						else
							window.location.replace(res.data.link + '?order_id=' + res.data.order_id + '&uid=' + params.uid )
					})
				}
			},
			alipay()
			{
				this.payment_type = 2;
				this.payment = false;
				this.sign && this.pay();
			},
			wechat()
			{
				this.payment_type = 1;
				this.payment = false;
				this.sign && this.pay();
			},
		},		
		created()
		{
			this.loadData();
			this.order_status_arr[-1] = '退款中';
			this.order_status_arr[-2] = '已退款';
		}
	}
	
</script>

<style lang="less">
	.border-box{
		box-sizing: border-box;
		#scroll-navbar{
			.mint-navbar{
				width: 100%;
			}
		}
		.order-list{
			.order-list-item{
				.order-head{
					.store-img{
						width: 64/28rem;
						height: 64/28rem;
						border-radius: 100%;
					}
				}
				.body-item{
					border-bottom: 1px solid #fff;
					.body{
						background-color: #f5f5f5;
						img{
							width: 147/28rem;
							height: 147/28rem;
						}
						.goods-info{
							width: 510/28rem;
							.goods-text{
								width:  370/28rem;
							}
							.layout{
								align-items: flex-start;
							}
						}
					}
				}				
				.foot{
					.button{
						border-radius: 4px;
					}
					.delete-btn{
						color: #333333;
						border: 1px solid #333333;
					}
					.assess-btn{
						color: #ff0036;
						border: 1px solid #ff0036;
					}
				}
			}
			.order-list-item:nth-last-of-type(1){
				border-bottom: 0px;
			}
		}
		.coupon{
			h2{
				height: 110/28rem;
				line-height: 110/28rem;
				position: relative;
				i{
					position: absolute;
					right: 10%;
					top: 50%;
					transform: translate(50%,-50%);
				}
			}	
		}
		
	}
	.border-box * {
		box-sizing: border-box;
	}
	
	
</style>

